2025 iThome鐵人賽
「 Flutter ：30天打造念佛App，跨平台從Mobile到VR，讓極樂世界在眼前實現 ! 」
Day 25
「 Flutter UX & UI 實戰入門篇 — 生活在地球的勇者啊，極樂世界什麼樣子呀 ? (1) 」
《佛說阿彌陀經》：
「 從是西方，過十萬億佛土，有世界名曰極樂，其土有佛，號阿彌陀，今現在說法。
舍利弗，彼土何故名為極樂？其國眾生，無有眾苦，但受諸樂，故名極樂。 」
白話：
從地球所在的世界往西，越過十萬億個佛國剎土，有一個世界叫做極樂。
極樂世界有佛住世，名稱是阿彌陀，如今正在那裡講說佛法。
舍利弗，那個佛國為什麼名稱叫做極樂呢？
那個佛國的眾生，沒有種種痛苦，但享受諸多快樂，所以叫做極樂世界。
目前念佛App 已經實作核心功能 ：
「 語音轉文字 」、「 本機與雲端儲存 」、「 第三方登入 」、「 多國語系 」。
今天我們要一起來初步認識 「 UX & UI 」，一起為使用者打造美觀的介面與流暢體驗！
Day25 文章目錄：
一、UI、UX設計流程
二、UI
三、UX
1. 簡介
UI／UX 設計流程：
以 (0) 使用者與情境為起點，藉由使用者故事釐清需求與解決的痛點，
(1) 再依使用者需求定義頁面分類完成資訊架構，
接著 (2) 展開功能地圖具體規劃產品功能、
再透過 (3) 操作邏輯流程確認使用者操作路徑與錯誤處理，
再以 (4) 線框稿確定版面與功能組件，
接著發展 (5) 設計精稿、元件庫與樣式規範，
最後用 (6) 可點擊原型 Prototype 進行互動測試。
2. 各階段重點
| 階段 | 負責範圍 | 主要產出 |
|---|---|---|
| 資訊架構(Information Architecture) | 依使用者需求與情境定義頁面分類、命名與層級 | Sitemap、內容清單 |
| 功能地圖 (Functional Map) | 依需求規劃所需功能 | 產品功能心智圖、功能/模組清單 |
| 操作邏輯流程 (Logic Flow) | 使用者操作路徑與系統反應 | 流程圖、錯誤處理流程 |
| 線框稿 (Wireframe) | 定版佈局與功能組件(不涉及細節) | 低保真線框 |
| 設計精稿（Mockup） | 視覺風格與細節定案 | 高擬真畫面、元件庫、樣式規範 |
| 原型（Prototype） | 互動模擬與測試 | 可點擊的原型、演示影片 |
1. 簡介
UI（User Interface）可以簡單理解為使用者與 App 互動的介面與狀態回饋 ，
包含：字體、按鈕、圖示、排版、間距、動畫效果、提示文字等。
UI 的核心組成:
- 視覺語言：色彩（主色/輔色）、字體階層（標題/內文/數字）、陰影與圓角。
- 元件系統：Button、Card、Tag、Dialog、表單欄位等。
- 版面與間距：欄/列、容器寬度，保持一致的節奏感。
- 圖示與插圖：風格統一（線粗、圓角一致），避免混搭。
- 動效與回饋：過場互動（按鈕回彈、成功/錯誤提示）。
- 多語系與可近用：長字串完整顯示、字級放大不跑版、點擊區大小。
2. Wireframe 工具
線框稿 (Wireframe) 是 UI 的設計草圖，
通常是中、低模真度只會以簡單顏色(常見黑白灰)
繪製頁面有什麼內容、內容要放置何處。
| 工具 | 定位 | 協作 | 元件/模板 | 適合對象 |
|---|---|---|---|---|
| Figma | 雲端協作設計與原型 | 即時共編、評論 | 社群大量線框/模板 | 從線框到高保真的一站式 |
| Balsamiq | Lo-Fi 線框，專注資訊結構 | 雲端版可協作 | 低保真控件庫 | 快速對齊結構、避免過早美化 |
| Axure RP | 進階原型：條件與資料驅動 | 雲端分享/評論、版本控制（簽入/簽出） | 元件庫、流程連線 | 做高擬真互動/規格 |
| Penpot | 設計＋原型 | 線上協作/自架空間 | 開源資源、SVG 為本 | 重視開源與私有部署 |
| Miro | 協作白板＋Wireframe 模板 | 即時共編 | 白板模板與 UI Library | 工作坊、快速對齊 IA/流程 |
1. 簡介
UX（User Experience）可以大致理解為使用者從開啟到離開 App 的完整體驗感受。
大致包含：
- 需求與情境：誰在何時何地使用？
- 資訊架構：分頁功能與命名是否一看就懂。
- 互動設計：按了會有明確回饋、錯誤有指引、流程不繞路。
- 可信任：隱私、資料刪除、離線與失敗時的備援路徑。
2. Logic Flow
Logic Flow 是將 靜態的頁面結構(IA)與具體功能(功能地圖)，
轉化為實際操作步驟(使用者流程)，並且加上系統的邏輯判斷。
常見的步驟符號：
| 符號形狀 | 意義 | 範例 |
|---|---|---|
| 圓角矩形 | 畫面/頁面 (Screen/Page) | 登入頁、使用者帳戶頁 |
| 箭頭 | 流程方向 (Direction) | 從 登入頁 → 到 首頁 |
| 矩形 | 使用者操作 (Action) | 點擊 送出按鈕、輸入密碼 |
| 菱形 | 決策點 (Decision/Logic) | 是否已驗證電子郵件？ / 訂單是否付款成功？ |
| 圓形/橢圓形 | 開始與結束 (Start/End) | 開始註冊會員、完成會員註冊 |
3. Logic Flow 工具
| 工具 | 定位 | 協作 | 最適用場景 | 備註 |
|---|---|---|---|---|
| FigJam | 與 Figma 打通的線上白板 | 即時多人、開放連結可共編 | 工作坊、構思、快速流程 | 與 Figma 深度整合、支援開放會議協作。 |
| Miro | 成熟白板、模板多 | 即時多人、Miro Lite 免登入 | 跨部門協作、流程/心智圖 | 模板量體龐大；Miro Lite 可快速分享。 |
| Lucidchart | 正統流程圖/泳道、企業整合 | 即時協作 | 正式交付、流程/責任分工 | 官方著重泳道、與多工具整合。 |
| diagrams.net（draw.io） | 免費、雲端/離線兩用 | 可共編（雲端） | 本地/企業內網 | 強調隱私、自託管與 Atlassian 外掛。 |
| Whimsical | 一站式 Flow + Wireframe + Docs | 即時協作 | 快速成稿、低學習門檻 | Flowchart 介面快、含多內容型態 |
| Mermaid | 文本語法產圖 | 以檔案協作為主 | 要版控、文件內嵌流程 | 支援多種圖，有線上編輯器。 |
| 重點 | 內容 |
|---|---|
| UI、UX 設計流程 | 資訊架構⭢功能地圖⭢操作邏輯流程⭢線框稿⭢設計精稿⭢原型 |
| UI | App 的互動介面及狀態回饋 |
| UX | 使用到離開 App 的使用者體驗感受 |
iThome鐵人賽
看影片追技術